<!doctype html>
<html lang="en">
<head>
	<title>Wizard - Pager Navigation</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="Navigate by wijpager." />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijwizard.css" rel="stylesheet" type="text/css" />
	<link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijwizard.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("#pages").wijwizard({
				navButtons: 'none'
			});

			$("#pager").wijpager({
				pageCount: $("#pages").wijwizard('count'),
				pageIndex: $("#pages").wijwizard('option', 'activeIndex'),
				mode: "nextPreviousFirstLast",
				pageIndexChanged: function () {
					var pageIndex = $("#pager").wijpager("option", "pageIndex");
					$("#pages").wijwizard({ activeIndex: pageIndex });
				}
			});

			$(':radio').change(function (e) {
				switch ($(this).val()) {
					case "Default":
						$("#pager").wijpager('option', {
							firstPageClass: "ui-icon-seek-first",
							previousPageClass: "ui-icon-seek-prev",
							nextPageClass: "ui-icon-seek-next",
							lastPageClass: "ui-icon-seek-end",
							firstPageText: "First",
							previousPageText: "Previous",
							nextPageText: "Next",
							lastPageText: "Last"
                        });
						break;

					case "Text":
						$("#pager").wijpager('option', {
							firstPageClass: "",
							previousPageClass: "",
							nextPageClass: "",
							lastPageClass: "",
							firstPageText: "First",
							previousPageText: "Previous",
							nextPageText: "Next",
							lastPageText: "Last"
						});
						break;

					case "Custom":
						$("#pager").wijpager('option', {
							firstPageClass: "",
							previousPageClass: "",
							nextPageClass: "",
							lastPageClass: "",
							firstPageText: "|<",
							previousPageText: "<",
							nextPageText: ">",
							lastPageText: ">|"
						});
						break;
				}
			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Pager Navigation</h2>
		</div>
		<div class="main demo">
			<div id="pages">
				<div>
					<p>
						Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
				</div>
				<div>
					<p>
						Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
				</div>
				<div>
					<p>
						Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
					<p>
						Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
				</div>
				<div>
					<h4>
						Studio Enterprise</h4>
					<p>
						Seven platforms, hundreds of controls, one studio. Build awesome desktop, Web, and mobile apps with our tools for WinForms, WPF, ASP.NET, Silverlight, iPhone, Mobile, and ActiveX.</p>
				</div>
				<div>
					<h4>
						Studio for WinForms</h4>
					<p>
						Over 65 .NET controls, including the ones you can't get anywhere else. Studio for WinForms can handle anything, from a grid with a million rows to a chart with unlimited points.</p>
				</div>
				<div>
					<h4>
						Studio for WPF</h4>
					<p>
						Studio for WPF offers everything from advanced data binding to rich data visualizations included in grids, schedulers, charts, reports, and more.</p>
				</div>
				<div>
					<h4>
						Studio for ASP.NET AJAX</h4>
					<p>
						Do more with less code. Over 45 styled, supercharged, and easy-to-use controls built on Web standards including AJAX, CSS, and XHTML.</p>
				</div>
				<div>
					<h4>
						Studio for Silverlight</h4>
					<p>
						Industrial strength Silverlight controls you cannot find anywhere else. Download ComponentOne Studio? for Silverlight, play, and watch the Web shine.</p>
				</div>
				<div>
					<h4>
						Studio for iPhone</h4>
					<p>
						Use your existing ASP.NET skill set and take your Web apps to the iPhone. ComponentOne Studio? for iPhone gives you the iPhone UX.</p>
				</div>
			</div>
			<div id="pager">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<p>
					Pager Mode:
				</p>
				<input type="radio" value="Default" name="set1" checked="checked" />Default
				<input type="radio" value="Text" name="set1" />Text
				<input type="radio" value="Custom" name="set1" />Custom Text
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
				This sample features a simple wijwizard widget with navigation buttons. This is similar to the "Simple" sample; however, the navigation buttons in this sample are under the control. To do this, you have to set wijpager's navButtons options to none and then set the wijpager's mode option to a mode of your choosing.
			</p>
		</div>
	</div>
</body>
</html>
